<template>

    <div class="html">
        <Header></Header>

        <section class="container">
            <div>
                <articleList :articlesValue="articlesValue"></articleList>
                <div class="page">
                    <el-pagination v-model:current-page="ListDto.pageNum" size="small" background v-if="total != 0"
                        layout="prev, pager, next" v-model:page-size="ListDto.pageSize"
                        @current-change="handleCurrentChange" :total="total" class="mt-4" />
                </div>

            </div>

            <div class="sidebar">
                <About></About>
                <digital></digital>
                <hotArticle></hotArticle>
                <category></category>
            </div>
        </section>
    </div>
</template>

<script setup>
import { Header, articleList, hotArticle, category, About } from '@/components/Article/index.js'
import { getArticleListAPI } from '@/api'
import { reactive, ref, watch } from 'vue';
import digital from '@/components/digital/index.vue'
import { useRoute } from 'vue-router';

const route = useRoute()

let ListDto = reactive({
    pageNum: 1,
    pageSize: 6,
    categoryId: ''
})

let articlesValue = ref()
let total = ref(0)

const initarticleList = async () => {
    const res = await getArticleListAPI(ListDto)
    articlesValue.value = res.rows
    total.value = Number(res.total)
}

const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initarticleList()
}
watch(
    () => route.query.categoryId,
    () => {
        ListDto.categoryId = route.query.categoryId
        initarticleList()
    }, { deep: true, immediate: true })

initarticleList()

</script>

<style lang="scss" scoped>
.html {
    font-size: 80%;
    overflow-x: hidden;
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;
    background-color: #efbcda;
    background-image: linear-gradient(90deg, #f0f0f0 1%, #ead2ea 10.2%, #e4d5ee 19.6%, #d1def3 36.8%, #b5dee5 62.2%, #cfebf3 88.9%, #f0f0f0 99%);
}

section {
    padding: 2rem 9%;
}

.container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 1.5rem;
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 2rem 0;
}

@media(max-width:1200px) {
    section {
        padding: 3rem 1rem;
    }
}

@media(max-width:991px) {
    .Banner .box {
        justify-content: center;
        background-position: right;
    }

    .box .content {
        text-align: center;
    }

    .box .content span {
        font-size: 3rem;
        color: azure;
    }

    .box .content h3 {
        font-size: 4rem;
        color: chartreuse;
    }

    section {
        padding: 1rem;
    }

    .container {
        grid-template-columns: 1fr;

    }
}

@media (max-width:768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 1rem 0;
    }
}
</style>